<template>
  <div>
    <!-- 标题 -->
    <h2>用户排队列表</h2>
    <!-- 用户列表 -->
    <ul id="user-list">
      <!-- 使用 v-for 遍历用户列表，生成可拖动的列表项 -->
      <li
        v-for="(user, index) in users"
        :key="user.id"
        :id="`user-${user.id}`"
        draggable="true"
        @dragstart="dragStart(index)"
        @dragover="allowDrop"
        @drop="drop(index)"
      >
        <!-- 显示用户名称和ID -->
        {{ user.name }} (ID: {{ user.id }})
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义用户接口
interface User {
  id: number;
  name: string;
}

// 初始化用户列表
const users = ref<User[]>([
  { id: 1, name: '用户A' },
  { id: 2, name: '用户B' },
  { id: 3, name: '用户C' },
  { id: 4, name: '用户D' },
]);

// 用于存储当前被拖动用户的索引
let draggedIndex = ref<number | null>(null);

// 拖动开始时调用，记录被拖动用户的索引
const dragStart = (index: number) => {
  draggedIndex.value = index;
};

// 阻止默认行为，允许放置
const allowDrop = (e: DragEvent) => {
  e.preventDefault();
};

// 放置时调用，更新用户顺序
const drop = (targetIndex: number) => {
  // 如果没有被拖动的用户，直接返回
  if (draggedIndex.value === null) return;

  // 获取被拖动的用户
  const draggedUser = users.value[draggedIndex.value];
  // 从原位置移除用户
  users.value.splice(draggedIndex.value, 1);
  // 在目标位置插入用户
  users.value.splice(targetIndex, 0, draggedUser);

  // 重置被拖动用户的索引
  draggedIndex.value = null;
};
</script>

<style scoped lang="scss">
#user-list {
  list-style-type: none; // 移除列表默认样式
  padding: 0; // 移除内边距
  width: 300px; // 设置列表宽度

  li {
    padding: 10px; // 设置内边距
    margin: 5px 0; // 设置外边距
    border: 1px solid #ccc; // 设置边框
    background-color: #f9f9f9; // 设置背景色
    cursor: move; // 设置鼠标样式为可移动

    &:hover {
      background-color: #e9e9e9; // 鼠标悬停时改变背景色
    }
  }
}
</style>